<template>
  <div class="todo-item" :key="modelValue.id">
    <p v-show="!modelValue.editState">{{ modelValue.content }}</p>
    <input
      v-show="modelValue.editState"
      type="text"
      v-model.trim="todo.content"
    />
    <button v-show="!modelValue.editState" @click="edit(modelValue.id)">
      修改
    </button>
    <button v-show="modelValue.editState" @click="save(modelValue.id)">
      保存
    </button>
    <button @click="del(modelValue.id)">删除</button>
  </div>
</template>

<script>
export default {
  props: ["modelValue"],
  computed: {
    todo: {
      get() {
        return this.modelValue;
      },
    },
  },
  methods: {
    del(id) {
      // 触发自定义事件
      this.$emit("update:modelValue", id);
    },
    edit() {
      this.todo.editState = true;
    },

    save() {
      this.todo.editState = false;
    },
  },
};
</script>

<style>
</style>